<template>
  <div class="com-container">
    <div class="com-chart" ref="hot_ref"></div>
    <span :style="conStyle" class="iconfont arr-left" @click="toLeft"
      >&#xe6ef;</span
    >
    <span :style="conStyle" class="iconfont arr-right" @click="toright"
      >&#xe6ed;</span
    >
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getHotproduct } from "@/api";
export default {
  data() {
    return {
      echartsDom: null,
      hotData: null,
      showValueIndex: 0,
      titleFontSize: 0,
    };
  },
  mounted() {
    this.initEachat();
    this.getData();
    this.screenAdapter();
    window.addEventListener("resize", this.screenAdapter);
  },
  computed: {
    ...mapState(["style"]),
    conStyle() {
      return {
        fontSize: this.titleFontSize + "px",
      };
    },
  },
  watch: {
    style() {
      console.log("主题切换了");
      this.echartsDom.dispose(); // 销毁当前的图表
      this.initEachat(); // 重新以最新的主题名称初始化图表对象
      this.screenAdapter(); // 完成屏幕的适配
      this.upData(); // 更新图表的展示
    },
  },
  methods: {
    // 获取数据
    async getData() {
      this.hotData = await getHotproduct();
      this.upData();
    },
    // 初始化Eachats元素
    initEachat() {
      this.echartsDom = this.$echarts.init(this.$refs.hot_ref, this.style); //第一个参数是dom元素，第二个是主题
      const initOption = {
        title: {
          text: "▎热销商品的占比",
          left: 20,
          top: 20,
        },
        legend: {
          top: "15%",
          icon: "circle",
        },
        series: [
          {
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: true,
              },
              labelLine: {
                show: false,
              },
            },
            type: "pie",
            tooltip: {
              formatter: (org) => {
                let html = "";
                org.data.children.forEach((item) => {
                  html += `${item.name}:${item.value}<br />`;
                });
                return html;
              },
            },
            center: ["50%", "60%"],
          },
        ],
      };
      this.echartsDom.setOption(initOption);
    },
    // 浏览器大小变化
    screenAdapter() {
      const titleFontSize = (this.$refs.hot_ref.offsetWidth / 100) * 3.6;
      this.titleFontSize = titleFontSize;
      let adapterOption = {
        title: {
          textStyle: {
            fontSize: titleFontSize,
          },
        },
        tooltip: {
          axisPointer: {
            lineStyle: {
              width: titleFontSize,
            },
          },
        },
        legend: {
          itemWidth: titleFontSize / 2,
          itemHeight: titleFontSize / 2,
          itemGap: titleFontSize / 2,
          textStyle: {
            fontSize: titleFontSize / 2,
          },
        },
        series: [
          {
            barWidth: titleFontSize,
            itemStyle: {
              barBorderRadius: [0, titleFontSize / 2, titleFontSize / 2, 0],
            },
            radius: [0, titleFontSize * 4.5],
          },
        ],
      };
      this.echartsDom.setOption(adapterOption);
      this.echartsDom.resize();
    },
    // 更新页面元素
    upData() {
      let valueData = this.hotData[this.showValueIndex].children.map((item) => {
        return {
          name: item.name,
          children: item.children,
          value: item.value,
        };
      });
      let legenddata = this.hotData[this.showValueIndex].children.map(
        (item) => item.name
      );
      const initOption = {
        series: {
          data: valueData,
        },
        legend: {
          data: legenddata,
        },
      };
      this.echartsDom.setOption(initOption);
    },
    toLeft() {
      this.showValueIndex--;
      if (this.showValueIndex < 0)
        this.showValueIndex = this.hotData.length - 1;
      this.upData();
    },
    toright() {
      this.showValueIndex++;
      if (this.showValueIndex > this.hotData.length - 1)
        this.showValueIndex = 0;
      this.upData();
    },
  },
};
</script>

<style lang="scss" scoped>
.arr-left {
  position: absolute;
  left: 10%;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  cursor: pointer;
}
.arr-right {
  position: absolute;
  right: 10%;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.cat-name {
  color: #fff;
  position: absolute;
  left: 80%;
  bottom: 20px;
}
</style>